<template>
	<div>
		<div class="header">
			<div class="header-left">
				<div class="icon-back">
					<i class="iconfont icon-fanhui"></i>
				</div>
			</div>
			<div class="header-input">
				&nbsp;
				<i class="iconfont icon-sousuo"></i>
				输入武器/坐骑/飞剑/主题
			</div>
			<div class="header-right">
				{{this.city}}
				<i class="iconfont icon-jiantou icon-arrow"></i>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Header',
		props:{
			city:String
		}
	}
</script>

<style lang="stylus" scoped>
	/*
		resert 中 font-szie= 50px;
		移动端设计稿是 750宽 就是2倍图
		86px高 就是0.86rem
	*/
	@import '~@/assets/style/varibles.styl'
	/*
		定义常用color变量 方便更改	
		@ 表示 src 这个目录
		在 build/webpack.base.conf.js 可以自定义 其它文件也可以用字符来代替
		在css里用 @ 必须前面加波浪线 ~ 
		在css里用其他自定义的目录文件 也得加 ~
		例如上面的路劲可以写为 ~styles/varibles.style 其中这个style就是自定义的
		更改 webpack 配置要重新 npm run dev
	*/
	.header
		display:flex
		line-height:0.86rem
		background:$bgColor
		color:#fff
		.header-left
			width:0.64rem
			float:left
			.icon-back
				text-align:center
				font-size:0.4rem
		.header-input
			flex:1
			height:0.64rem
			line-height:0.64rem
			margin-top:0.12rem
			margin-left:0.2rem
			background:#fff
			border-radius:0.1rem
			color:#ccc
		.header-right
			width:1.24rem;
			float:right
			text-align:center
			.icon-arrow
				font-size:0.24rem;
	
</style>